import React, { useState } from 'react';
import Taro from '@tarojs/taro';
import Skeleton from 'taro-skeleton'
import {View, Navigator, Text, Block} from "@tarojs/components";
import CouponBox from "../coupon-box";
import CountDown from "../../../components/count-down/count-down";
import {platform} from "../../../utils/platform-settting.service";
import Float from "../../../components/float/float";
import {TARO_ENV} from "../../../constants/api";
import './product-name.scss';

interface ProductNameType {
  shareVolume?: any
  surplusStock?: any
  salesVolume?: any
  labels?: { url: string; name: string; image: string }[]
  name?: string
  loading?: boolean
  type?: string
  goodsLightspot?: string
  subTitle?: string
  no?: string
  isLogin?: boolean
  category?: any
  groupDetail?: any
  time?: any
  goodStatus?: any
  price?: any
  goodsId?: any
  inOneMinute?: any
  upDataDetail?: any
  buyDate?: string
  goodsLen?: number
  goods?: any
  virtualStore?: any
  actualVirtualStore?: any
}


const ProductName: React.FC<ProductNameType> = ({
                                                  virtualStore,
                                                  actualVirtualStore,
                                                  goodsLen,
                                                  goods,
                                                  surplusStock,
                                                  salesVolume,
                                                  shareVolume,
                                                  groupDetail,
                                                  goodStatus,
                                                  inOneMinute,
                                                  time,
                                                  price,
                                                  isLogin,
                                                  category,
                                                  goodsId,
                                                  upDataDetail,
                                                  goodsLightspot,
                                                  subTitle,
                                                  labels,
                                                  name,
                                                  loading,
                                                  type,
                                                  no,
                                                  buyDate,
                                                  refundLabels
                                                }) => {
  const dataColor = Taro.getStorageSync('colorData');
  const [show, setShow] = useState(false);
  const shareWow = () => {
    setShow(!show)
  }
  return (
    <Skeleton title row={2} action loading={loading} rowHeight='40px'>
      <View className={"product-name-box " + (type == "limited" ? "fixed-top" : '')}>
        <View className='title-box-only'>
          {!groupDetail && <Block>
            <View className='title'><Text selectable>{name}</Text></View>
            {subTitle && <View className={`${(buyDate || no) ? 'subTitle' : 'm-b-big subTitle'}`}><Text selectable>{subTitle}</Text></View>}
          </Block> }
          {type === 'limited' && !goods.notShowCountDown && <Block>
            <Skeleton loading={loading}>
              <Block>
                {/*
                  20221015限购商品-新增: 单品列表不为空
                  展示价格的必要前提之一是：限时抢购类商品
                  包括：景点、酒店的抢购模式、限时抢购
                */}
                {!groupDetail && (goods || upDataDetail) && (goodsLen !== null && goodsLen !== undefined && goodsLen > 0) && <View className='countDown-box-wrapper'>
                  <View className={`countDown-box ${process.env.P_ENV !== 'kd' && upDataDetail.can_zero_buy != 1 && (upDataDetail.brokerage || upDataDetail.first_brokerage) && 'countDown-bigHeight'}`}>
                    <View className='price-box'>
                      <View className={"price " + (loading ? "box-seat" : "")}>
                        <View>
                          <Text className={`symbol font-family-price ${!!goods.discount && 'm-min-b m-min-big'}`} style={`color: ${dataColor.priceColor}`}>¥</Text>
                          <View className='view-inline number font-family-price' style={`color: ${dataColor.priceColor}`}><Float style={`${!!goods.discount && 'position: relative; bottom: -5.9px !important' }`} value={upDataDetail.can_zero_buy != 1 ? !!upDataDetail.discounts_price ? upDataDetail.discounts_price: price : 0} />{!!upDataDetail.discounts_price && <Text className='after-coupon' style={`${!!goods.discount && 'position: relative; bottom: -4.4px !important' }`}>券后价</Text>}</View>
                          {!!goods.discount && <Text className='product-name-discount' style={`background-color: ${dataColor.discountBgColor}`}><Text className='font-family-price'>{goods.discount}</Text>折</Text>}
                          {upDataDetail.vip_price || ""}
                          {(upDataDetail && (upDataDetail.vip_price != null && upDataDetail.vip_price >= 0)) && <Text className={`members-enjoy-wrapper ${!!goods.discount && 'member-has-discount'}`} style={`border: 1px solid ${dataColor.discountBgColor}`}><Text className={`members-enjoy-symbol ${TARO_ENV + 'members-enjoy-symbol'}`}>￥</Text><Text className={`members-enjoy-price font-family-price ${TARO_ENV + 'members-enjoy-price'}`}>{upDataDetail.vip_price}</Text><Text className='members-enjoy'>会员享</Text></Text>}
                          {upDataDetail && !!upDataDetail.market_price && <Text className={`window_number font-family-price ${!!goods.discount && 'm-min-b'}`} style={`color: ${dataColor.originalPriceColor}`}>￥{upDataDetail && upDataDetail.market_price}</Text>}
                        </View>
                      </View>
                      {process.env.DISTINGUISH_IDENTITY && process.env.P_ENV !== 'kd' && upDataDetail.can_zero_buy != 1 && <View className='commission' style='white-space: nowrap'>
                        {upDataDetail && upDataDetail.brokerage ? <View style='display: inline;'>佣金：<Text className='brokerage-symbol'>¥</Text><Text className='big-brokerage'>{upDataDetail && upDataDetail.brokerage + ' '}</Text> </View> : ''}
                        {upDataDetail && upDataDetail.first_brokerage ? <View className={`${ upDataDetail.brokerage && 'margin-left-first-brokerage' }`} style='display: inline;'>上级佣金：<Text className='brokerage-symbol'>¥</Text><Text className='big-brokerage'>{upDataDetail && upDataDetail.first_brokerage}</Text></View> : ''}
                      </View>}
                    </View>
                    <View className='count-down-box'>
                      {goodStatus === 0 && <View className='count-down-wrap'>
                        <View className='time-tips'>距离开售还剩</View>
                        <CountDown time={time || 0} inDjs={inOneMinute} />
                      </View>}
                      {goodStatus === 1 && <View className='count-down-wrap'>
                        <View className='time-tips'>距结束仅剩</View>
                        <CountDown time={time || 0} inDjs={inOneMinute} />
                      </View>}
                    </View>
                  </View>
                </View>}
              </Block>
            </Skeleton>
            {upDataDetail.couponLabel && upDataDetail.couponLabel.length > 0 ?
              <CouponBox type={type} goodsLightspot={goodsLightspot} groupDetail={groupDetail} list={upDataDetail.couponLabel} isLogin={isLogin} category={category} goodsId={goodsId} /> :
              <Block>{ !groupDetail && !goodsLightspot && <View style='height: 10Px;background:#fff;' />}</Block> }
          </Block>}
          {type === 'limited' && groupDetail && <Block>
            <View className='title'><Text selectable>{name}</Text></View>
            {subTitle && <View className={`${(buyDate || no) ? 'subTitle' : 'm-b-big subTitle'}`}><Text selectable>{subTitle}</Text></View>}
          </Block> }
          {
            !goodsLightspot && ((labels && labels.length > 0) || (refundLabels && refundLabels.length > 0)) &&
            <View className='labels nogoodsLightspot'>
              {labels.map((item, index) => <Navigator className='label'
                style={`border: 1Px solid ${dataColor.titleColor};color: ${dataColor.titleColor}`}
                key={index}
                url={item.url}
              ><Text>{item.name}</Text></Navigator>)}
              {
                process.env.P_ENV === 'kd' && refundLabels.map((item, index) => <Navigator className='label'
                  style={`border: 1Px solid ${dataColor.titleColor};color: ${dataColor.titleColor}`}
                  key={index}
                ><Text>{item}</Text></Navigator>)
              }
            </View>
          }
          { buyDate && <View className='no'>出行日期：{buyDate}</View> }
          { ((no && process.env.DETAIL_SHOW_NO) || !!shareVolume) && type !== 'limited' && <View className='label-share'>
            { no && process.env.DETAIL_SHOW_NO && <View>编号：{no}</View>}
            {!!shareVolume && <View>{shareVolume}人分享</View>}
          </View> }
          {goodsLightspot && <View className='goodsLightspot'>
            {((labels && labels.length > 0) || (refundLabels && refundLabels.length > 0)) && <View style='height: 12px;' />}
            {
              ((labels && labels.length > 0) || (refundLabels && refundLabels.length > 0)) &&
              <View className='labels'>
                {labels.map((item, index) => <Navigator className='label' style={`border: 1Px solid ${dataColor.titleColor};color: ${dataColor.titleColor}`} key={index} url={item.url}><Text>{item.name}</Text></Navigator>)}
                {
                  process.env.P_ENV === 'kd' && refundLabels.map((item, index) => <Navigator className='label'
                    style={`border: 1Px solid ${dataColor.titleColor};color: ${dataColor.titleColor}`}
                    key={index}
                  ><Text>{item}</Text></Navigator>)
                }
              </View>
            }
            <View className='goods-lightspot'>
              <Text selectable>{goodsLightspot}</Text>
            </View>
          </View>}
          { (!!surplusStock || !!salesVolume || !!shareVolume)  && type === 'limited' && <View className='stock-share-sales'>
            {process.env.TARO_ENV !== 'tt' && process.env.P_ENV !== 'hiyogo' && !!platform.info.is_show_stock && <Block>
              {!!virtualStore ? <Block>{!!actualVirtualStore && <View className='stock-share-sales-items'>库存：{actualVirtualStore}</View>}</Block> : <Block>{!!surplusStock && <View className='stock-share-sales-items'>库存：{surplusStock}</View>}</Block>}
            </Block>}
            {process.env.TARO_ENV === 'tt' && !!surplusStock && <View className='stock-share-sales-items'>库存：{surplusStock}</View>}
            {(!!salesVolume && !!platform.info.is_show_sales_volume) && <View className='stock-share-sales-items'>销量：{salesVolume}笔</View>}
            {!!shareVolume && <View className='stock-share-sales-items'>{shareVolume}人分享</View>}
          </View> }
        </View>
      </View>
    </Skeleton>
  )
}
ProductName.defaultProps = {
  labels: [],
  name: '',
  virtualStore: 0,
  actualVirtualStore: 0,
  shareVolume: 0,
  surplusStock: 0,
  salesVolume: 0,
  subTitle: '',
  goodsLightspot: '',
  type: '',
  loading: false,
  no: '',
  buyDate: ''
}

export default ProductName
